<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page errorPage="error.jsp"%>
<%@ page isThreadSafe="true"%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles"%>
<html>

	<head>	
		<title>宠物信息</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		
		<link rel="stylesheet" type="text/css" href="styles.css">
		<script type="text/javascript" src="query.js"></script>
		
		 <style type="text/css">
<!--
/*- Menu Tabs--------------------------- */


    #tabs {
      float:left;
      width:100%;
      background:#FCF3F8;
      font-size:93%;
      line-height:normal;
      }
    tr {
        margin:0;
        padding:10px 10px 0 50px;
        text-align: center;
        color: #00ccff;
      }
    td {
      margin:0;
      padding:0;
      }
    #tabs a {
      float:left;
      background:url("img\tableft.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs a span {
      float:left;
      display:block;
      background:url("img\tabright.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#FF9834;
      }
    #tabs a:hover {
      background-position:0% -42px;
      }
    #tabs a:hover span {
      background-position:100% -42px;
      }

        #tabs #current a {
                background-position:0% -42px;
        }
        #tabs #current a span {
                background-position:100% -42px;
        }
-->
</style>
 
	</head>
	<body>
			
		<!-- 判断访客是否登录了,没有返回主页 -->
	<% 
	
		if(pageContext.getRequest().getAttribute("petpo")==null){
		response.sendRedirect("index.jsp");
		return;
		}
	%>
	
	
	
		<p>
			<img src="img\backdrop.gif" />
		</p>
		<div style="float: left">
			<a href="index.jsp">首页</a>|
			<a href="foster.jsp">apply for your own pet </a>
		</div>


		<p>
			&nbsp;
		</p>
		<DIV id=tabline>
			&nbsp;
		</DIV>
		<div>
			<div id="m_blog" style="margin-left: 80px">
				<div style="width: 35%; float: left; margin-right: 40px">
					<br><br>
					<div class="line">
						搜索查询宠物信息
					</div>
						<br>
					<div class="cnt">
						<form action="#" method="post">
							<p>
								&nbsp;&nbsp;查找方式：&nbsp;&nbsp;
								<select name="sort" id="sort" onchange="change(this.options[this.selectedIndex].value)">
									<option value="q">
										===请选择===
									</option>
									<option value="name">
										宠物名
									</option>
									<option value="atype">
										类别
									</option>
									<option value="hostname">
										主人
									</option>
								</select>
							</p>
							<P id="add" style="text-align: center">&nbsp;</P>
							<p style="text-align: center">
								<input type="submit" value="查找" alt="实现了排序，分页 good"/>
							</p>


						</form>

					</div>

				</div>
				<DIV id="cals" style="width: 45%; float: left;">
					<br>
					<div class="line">
						&nbsp;
					</div>
					<br>
					<table align="center">
						<tr id="tabs">
							<!-- CSS Tabs -->
							<td id="current">
								<a href="petname.do"><span>宠物名</span>
								</a>
							</td>
							<td>
								<a href="type.do"><span>类别</span>
								</a>
							</td>
							<td>
								<a href="power.do"><span>力量</span>
								</a>
							</td>
							<td>
								<a href="cute.do"><span>聪明</span>
								</a>
							</td>
							<td>
								<a href="love.do"><span>爱心</span>
								</a>
							</td>
							<td>
								<a href="host.do"><span>主人</span>
								</a>
							</td>
						</tr>

				<tr><td>ruby</td><td>penguin</td><td>100</td><td>100</td><td>100</td><td>DDJHOST</td></tr>	
				<tr><td>david</td><td>cat</td><td>150</td><td>150</td><td>150</td><td>Juliet</td></tr>
				<tr><td>lucy</td><td>rabit</td><td>40</td><td>60</td><td>110</td><td>Romeo</td></tr>
				<tr><td>frank</td><td>dog</td><td>65</td><td>100</td><td>100</td><td>DDJ</td></tr>
				<tr><td>ruby</td><td>penguin</td><td>100</td><td>100</td><td>100</td><td>DDJ</td></tr>
				<tr><td>ruby</td><td>penguin</td><td>100</td><td>100</td><td>100</td><td>DDJ</td></tr>				
				</table>		

				</DIV>
			</div>
		</div>


	</body>
</html>
